﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Wijmo.Master" AutoEventWireup="true"
    CodeBehind="ClientSideFunctions.aspx.cs" Inherits="ControlExplorer.C1Menu.ClientSideFunctions" %>

<%@ Register Namespace="C1.Web.Wijmo.Controls.C1Menu" Assembly="C1.Web.Wijmo.Controls.3"
    TagPrefix="wijmo" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <wijmo:C1Menu runat="server" ID="Menu1" >
        <Items>
            <wijmo:c1menuitem id="C1MenuItem1" runat="server" text="菜单项">
            </wijmo:c1menuitem>
            <wijmo:c1menuitem id="C1MenuItem2" runat="server" separator="true">
            </wijmo:c1menuitem>
            <wijmo:c1menuitem id="C1MenuItem3" runat="server" text="纵向" value="DynamicOrientationItem">
                <Items>
                    <wijmo:C1MenuItem ID="C1MenuItem4" runat="server" Text="菜单项">
                    </wijmo:C1MenuItem>
                    <wijmo:C1MenuItem ID="C1MenuItem5" runat="server" Text="菜单项">
                    </wijmo:C1MenuItem>
                    <wijmo:C1MenuItem ID="C1MenuItem6" runat="server" Text="菜单项">
                    </wijmo:C1MenuItem>
                    <wijmo:C1MenuItem ID="C1MenuItem7" runat="server" Text="菜单项">
                    </wijmo:C1MenuItem>
                    <wijmo:C1MenuItem ID="C1MenuItem8" runat="server" Text="菜单项">
                    </wijmo:C1MenuItem>
                </Items>
            </wijmo:c1menuitem>
            <wijmo:c1menuitem id="C1MenuItem9" runat="server" text="菜单项">
            </wijmo:c1menuitem>
            <wijmo:c1menuitem id="C1MenuItem10" runat="server" text="菜单项">
            </wijmo:c1menuitem>
        </Items>
    </wijmo:C1Menu>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="Description" runat="server">
<p>此示例展示了如何从客户端添加或者移除项目。 </p><br/>
<p>示例中使用了一下行为：</p>
<ul>
	<li>add（添加）</li>
	<li>remove（移除）</li>
</ul>
<p>add 行为包含以下参数：</p>
<ul>
	<li><strong>item（项目）</li></strong>
	<p>item指定了将被添加到菜单或者菜单项中的标记。 "&lt;a&gt;item&lt;/a&gt;" 针对菜单项，"&lt;h3&gt;head&lt;/h3&gt;" 针对头项目。为空则针对分隔项目。</p>
	<li><strong>selector（选择器）</li></strong>
	<p>selector指定了一个jQuery选择器，它指示新项目将被添加在哪儿。参数是可选的，如果什么都没有设置，它们将被添加到菜单中。</p>
	<li><strong>index（索引）</li></strong>
	<p>index指定了它同级的索引。</p>
</ul>
<p>remove 行为包含以下参数：</p>
<ul>
	<li><strong>selector（选择器）</li></strong>
	<p>selector指定了一个使用索引参数的jQuery选择器。如果索引没有被指定，那么选择器所指定的项目将会被移除。否则，选择器指定移除项目的父项目。</p>
	<li><strong>index（索引）</li></strong>
	<p>index指定被选择器指定项目的子项目的索引。</p>
</ul>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ControlOptions" runat="server">
    <fieldset>
        <legend>移除功能</legend>
        <label for="tbSelector">
            选择器</label>
        <input type="text" id="tbSelector" />
        <label for="tbIndex">
            索引</label>
        <input type="text" id="tbIndex" />
        <input type="button" value="移除" onclick="remove()" />
    </fieldset>
    <fieldset>
        <legend>添加功能</legend>
        <label for="tbItem">
            项目</label>
        <input type="text" id="tbItem" />
        <label for="tbAddSelector">
            选择器</label>
        <input type="text" id="tbAddSelector" />
        <label for="tbAddIndex">
            索引</label>
        <input type="text" id="tbAddIndex" />
        <input type="button" value="添加" onclick="add()" />
    </fieldset>
    <script type="text/javascript">
        function remove() {
            var index, selecotr;
            if ($("#tbIndex").val() != "" && !isNaN($("#tbIndex").val())) {
                index = parseInt($("#tbIndex").val());
            }
            if ($("#tbSelector").val() !== "") {
                selecotr = $("#tbSelector").val();
            }
            if (!selecotr && index != undefined) {
                selecotr = index;
                index = null;
            }
            $("#<%= Menu1.ClientID %>").c1menu("remove", selecotr, index);
        }

        function add() {
            var index, selecotr, item;
            item = $("#tbItem").val();
            if ($("#tbAddIndex").val() != "" && !isNaN($("#tbAddIndex").val())) {
                index = parseInt($("#tbAddIndex").val());
            }
            if ($("#tbAddSelector").val() !== "") {
                selecotr = $("#tbAddSelector").val();
            }
            if (!selecotr && index != undefined) {
                selecotr = index;
                index = null;
            }
            $("#<%= Menu1.ClientID %>").c1menu("add", item, selecotr, index);
        }
    </script>
    <asp:Button ID="Button1" runat="server" Text="按钮" 
        onclick="Button1_Click1" />

</asp:Content>
